import React, { FC,useState,useEffect } from 'react'
import { Pagination} from 'antd'
import { useSearchParams,useNavigate,useLocation } from 'react-router-dom'
type PropsType = {
    total: number
}

const SelfPagination: FC<PropsType> = (props:PropsType)=>{
    const { total } = props
    const [current,setCurrent] = useState(1)
    const [pageSize, setPageSize] = useState(1)
    const [searchParams] = useSearchParams()
    const nav = useNavigate()
    const { pathname } = useLocation()
    useEffect(()=>{
        const page = parseInt(searchParams.get('page') || '')  || 1
        const pageSize = parseInt(searchParams.get('pageSize') || '')  || 10
        setCurrent(page)
        setPageSize(pageSize)
    },[searchParams])

    const handleChange = (page:number,pageSize:number)=>{
        console.log('changed',page,pageSize);
        // 获取最新的 page,pageSize
        searchParams.set('page',page.toString())
        searchParams.set('pageSize',pageSize.toString())
        nav({
            pathname,
            search: searchParams.toString()
        })
    }

    return <Pagination onChange={handleChange} current={current} pageSize={pageSize} total={total} />
}

export default SelfPagination